import React, { useState, useCallback } from 'react';
import { Input, Button, message } from 'antd';
import Nav from '../../components/nav';
import { fetchData } from '../../request'
import './style.scss';

const ChangePas = props => {

  const [oldPas, setOldPas] = useState("")
  const [newPas, setNewPas] = useState("")

  const handleChangeOld = useCallback((e) => {
    console.log("hgfdjskwuehdh", e.target.value)
    setOldPas(e.target.value)
  })
  const handleChangeNew = useCallback((e) => {
    console.log("76543218900987", e.target.value)
    setNewPas(e.target.value)
  })

  const onSubmit = useCallback(() => {
    fetchData({
      method: "post",
      url: "/makeUp/account/editPwd",
      data: {
         id: localStorage.getItem('id'),
         password: oldPas,
         newPassword: newPas
      }
    }).then((res) => {
      if(res.code === 200){
        message.success(res.msg)
      }else{
        message.error(res.msg)
      }
    })
  })

  return(
    <div className="change-page">
      <div className="bg"></div>
      <Nav backUrl="/person"></Nav>
      <div className="change-box">
        <Input.Password placeholder="old password" onChange={handleChangeOld} />
        <Input.Password placeholder="new password" onChange={handleChangeNew} />
        <Button type="primary" onClick={onSubmit}>提交</Button>
      </div>
    </div>
  )
}
export default ChangePas